<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>弹框集合</title>
    <meta content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' name='viewport'>
    <!-- bootstrap 3.0.2 -->
    <link href="../css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <!-- font Awesome -->
    <link href="../css/font-awesome.min.css" rel="stylesheet" type="text/css" />
    <!-- Ionicons -->
    <link href="../css/ionicons.min.css" rel="stylesheet" type="text/css" />
    <!-- Theme style -->
    <link href="../css/AdminLTE.css" rel="stylesheet" type="text/css" />
    <!-- daterange picker -->
    <link href="../css/daterangepicker/daterangepicker-bs3.css" rel="stylesheet" type="text/css" />
    <!-- Theme style -->
    <link href="../css/AdminLTE.css" rel="stylesheet" type="text/css" />

    <link href="../css/myself.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" href="../css/reset.css" />
    <link rel="stylesheet" href="../css/pagination.css" />
    <link rel="stylesheet" href="../css/datepicker/datepicker3.css" />
    <link rel="stylesheet" href="../css/rqj.css" />
    <link rel="stylesheet" href="../css/sweetalert.css" />
    <link rel="stylesheet" href="../css/example.css" />






    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->

    <style>
        .r_box{display: block;position: static;}
        .btn.btn-success{padding:6px 12px;}
        .btn.btn-default{padding:6px 12px;}
    </style>
    <script>

    </script>
</head>
<body>
<div>

    <!--box1-->
    <div class=" r_box box1">
        <div class="form-group">
            <label class="label_text">面料到期日:</label>
            <div class="input-group">
                <div class="input-group-addon">
                    <i class="fa fa-calendar"></i>
                </div>
                <input class="form-control pull-right reservation" type="text">
            </div>
        </div>
        <div class="r_radio_warp">
            <span>是否有首件样</span>
            <label class="r_radio"><input type="radio" name="r1" class="r1" value="r1" ><span>有</span></label>
            <label class="r_radio"><input type="radio" name="r1" class="r2" value="r2"><span>无</span></label>
        </div>
        <div class="clearfix r_btn_wrap">
            <button class="btn btn-primary fl certain">确定</button>
            <button class="btn btn_white fr cancel">取消</button>
        </div>
    </div>

    <!--box2-->
    <div class=" r_box box2">
        <div class="form-group">
            <label class="label_text">检查首件样时间</label>
            <div class="input-group">
                <div class="input-group-addon">
                    <i class="fa fa-calendar"></i>
                </div>
                <input class="form-control pull-right reservation" type="text">
            </div>
        </div>
        <textarea class="r_textarea"></textarea>
        <div class="clearfix r_btn_wrap">
            <button class="btn btn-primary fl certain">确定</button>
            <button class="btn btn_white fr cancel">取消</button>
        </div>
    </div>

    <!--box3-->
    <div class=" r_box box3">
        <div class="form-group">
            <div class="clearfix">
                <label class="label_text fl">选择计划中查时间段</label>
                <i class="fa fa-calendar fr" style="font-size: 1.5rem;"></i>
            </div>
            <div class="clearfix">
                <div class="input-group fl" style="width: 45%;">
                    <div class="input-group-addon ">
                        <i class="fa fa-calendar"></i>
                    </div>
                    <input class="form-control pull-right reservation" type="text">
                </div>
                <span class="fl" style="line-height: 34px;height: 34px;width: 10%;text-align: center;">至</span>
                <div class="input-group fl" style="width: 45%">
                    <div class="input-group-addon ">
                        <i class="fa fa-calendar"></i>
                    </div>
                    <input class="form-control pull-right reservation" type="text">
                </div>
            </div>

        </div>
        <div class="clearfix r_btn_wrap">
            <button class="btn btn-primary fl certain">确定</button>
            <button class="btn btn_white fr cancel">取消</button>
        </div>
    </div>

    <!--box4-->
    <div class=" r_box box4">
        <div>
            <p class="title">上传尾查调查表</p>
            <div class="input-group">
                <input class="form-control" type="text">
                    <span class="input-group-addon" style="position: relative;overflow: hidden;">
                        浏览
                        <input type="file" style="position: absolute;left: 0;top: 0;height: 34px;opacity: 0;">
                    </span>
            </div>
        </div>
        <div class="r_radio_warp">
            <span>审核</span>
            <label class="r_radio"><input type="radio" name="r1" class="r1" value="r1"><span>通过</span></label>
            <label class="r_radio"><input type="radio" name="r1" class="r2" value="r2"><span>不通过</span></label>
        </div>
        <textarea class="r_textarea" placeholder="备注:"></textarea>
        <div class="clearfix r_btn_wrap">
            <button class="btn btn-primary fl certain">确定</button>
            <button class="btn btn_white fr cancel">取消</button>
        </div>
    </div>

    <!--box5-->
    <div class=" r_box box5">
        <div>
            <label class="r_check">
                <input type="radio" name="r2" class="r1">
                <span>发送合格品,次货不发货</span>
            </label>
            <label class="r_check">
                <input type="radio" name="r2" class="r2">
                <span>先发送合格品,次品修改后再发送</span>
            </label>
            <label class="r_check">
                <input type="radio" name="r2" class="r3">
                <span>工厂修改次品,全部完成后发货</span>
            </label>
        </div>
        <div class="clearfix r_btn_wrap">
            <button class="btn btn-primary fl">确定</button>
            <button class="btn btn_white fr cancel">取消</button>
        </div>
    </div>

    <!--box6-->
    <div class=" r_box box6">
        <div class="stopWarn" >
            <h1 class="p_center">确定终止订单?</h1>
            <p class="p_center">终止订单可能无法在规定时间内给客户交货</p>
        </div>
        <div>
            <p>终止订单理由</p>
            <label class="r_check">
                <input type="radio" name="r2" class="r1">
                <span>发送合格品,次货不发货</span>
            </label>
            <label class="r_check">
                <input type="radio" name="r2" class="r2">
                <span>先发送合格品,次品修改后再发送</span>
            </label>
            <label class="r_check">
                <input type="radio" name="r2" class="r3">
                <span>工厂修改次品,全部完成后发货</span>
            </label>
        </div>
        <div class="clearfix r_btn_wrap">
            <button class="btn btn-primary fl certain">确定</button>
            <button class="btn btn_white fr cancel">取消</button>
        </div>
    </div>

    <!--box7-->
    <div class=" r_box box7">
        <div class="p_center title">
            填写装箱单
            <span class="fr holder"><i class="fa fa-times"></i></span>
        </div>
        <div>

        </div>
        <table class="table table-bordered">
            <tr>
                <th></th>
                <th>箱号</th>
                <th>箱子尺寸</th>
                <th>毛重</th>
                <th>净重</th>
                <th>颜色编码</th>
                <th>S</th>
                <th>M</th>
                <th>L</th>
                <th>XL</th>
                <th>合计</th>
            </tr>
            <tr>
                <td></td>
                <td>1</td>
                <td>24</td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td colspan="11" class="clearfix r_number">
                    <span class="fr">合计件数:200件</span>
                    <span class="fr">合计箱数:2箱</span>
                </td>
            </tr>
        </table>
        <div class="describe">历史合格品装箱单记录</div>
        <table class="table table-bordered">
            <tr>
                <th class="clearfix r_sub_header" colspan="10">
                    <span class="fl">发出日期:2016/10/12</span>
                    <span class="fl">物流公司:圆通快递</span>
                    <span class="fl">物流单号:146461616163</span>
                </th>
            </tr>
            <tr>
                <th>箱号</th>
                <th>箱子尺寸</th>
                <th>毛重</th>
                <th>净重</th>
                <th>颜色编码</th>
                <th>S</th>
                <th>M</th>
                <th>L</th>
                <th>XL</th>
                <th>合计</th>
            </tr>
            <tr>
                <td></td>
                <td>1</td>
                <td>24</td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td colspan="10" class="clearfix r_number">
                    <span class="fr">合计件数:200件</span>
                    <span class="fr">合计箱数:2箱</span>
                </td>
            </tr>
        </table>
        <div class="r_number clearfix">
            <span class="fr">共件数:1000件</span>
            <span class="fr">共箱数:10箱</span>
        </div>
        <div class="clearfix r_btn_wrap">
            <button class="btn btn-primary fl">确定</button>
            <button class="btn btn_white fl">取消</button>
        </div>
    </div>

    <!--box8-->
    <div class=" r_box box8">
        <button class="btn btn-primary fl certain">补货</button>
        <button class="btn btn_white fr stop ">终止定单</button>
    </div>


    <button id="aa">Try me!</button>

    <button id="bb">Try me!</button>

</div>

    <!-- jQuery 2.0.2 -->
    <script src="../js/jquery.min.js"></script>
    <!-- Bootstrap -->
    <script src="../js/bootstrap.min.js" type="text/javascript"></script>
    <!-- InputMask -->
    <script src="../js/plugins/input-mask/jquery.inputmask.js" type="text/javascript"></script>
    <script src="../js/plugins/input-mask/jquery.inputmask.date.extensions.js" type="text/javascript"></script>
    <script src="../js/plugins/input-mask/jquery.inputmask.extensions.js" type="text/javascript"></script>
    <!-- date-range-picker -->
    <script src="../js/plugins/daterangepicker/daterangepicker.js" type="text/javascript"></script>
    <!-- bootstrap color picker -->
    <script src="../js/plugins/colorpicker/bootstrap-colorpicker.min.js" type="text/javascript"></script>
    <!-- bootstrap time picker -->
    <script src="../js/plugins/timepicker/bootstrap-timepicker.min.js" type="text/javascript"></script>
    <!-- AdminLTE App -->
    <script src="../js/AdminLTE/app.js" type="text/javascript"></script>
    <script src="../js/AdminLTE/demo.js" type="text/javascript"></script>
    <script src="../js/sweetalert-dev.js"></script>
    <script type="text/javascript">
        $(function() {
            $("#aa").click(function() {
                swal({
                    title: "确定要删除该工厂吗",
                    text: "警示内容警示内容警示内容警示内容",
                    type: "warning",
                    showCancelButton: true,
                    confirmButtonColor: '#DD6B55',
                    confirmButtonText: '知道了',
                    closeOnConfirm: false
                })
            });

            $("#bb").click(function(){
                swal({
                    title: "主标题",
                    text: "副标题副标题",
                    type: "info",
                    showCancelButton: true,
                    closeOnConfirm: false,
                    showLoaderOnConfirm: true,
                }, function () {
                    setTimeout(function () {
                        swal("知道了");
                    }, 2000);
                });
            });


            //Datemask dd/mm/yyyy
            $("#datemask").inputmask("dd/mm/yyyy", {"placeholder": "dd/mm/yyyy"});
            //Datemask2 mm/dd/yyyy
            $("#datemask2").inputmask("mm/dd/yyyy", {"placeholder": "mm/dd/yyyy"});
            //Money Euro
            $("[data-mask]").inputmask();

            //Date range picker
            $('.reservation').daterangepicker();
            //Date range picker with time picker
            $('#reservationtime').daterangepicker({timePicker: true, timePickerIncrement: 30, format: 'MM/DD/YYYY h:mm A'});
            //Date range as a button
            $('#daterange-btn').daterangepicker(
                    {
                        ranges: {
                            'Today': [moment(), moment()],
                            'Yesterday': [moment().subtract('days', 1), moment().subtract('days', 1)],
                            'Last 7 Days': [moment().subtract('days', 6), moment()],
                            'Last 30 Days': [moment().subtract('days', 29), moment()],
                            'This Month': [moment().startOf('month'), moment().endOf('month')],
                            'Last Month': [moment().subtract('month', 1).startOf('month'), moment().subtract('month', 1).endOf('month')]
                        },
                        startDate: moment().subtract('days', 29),
                        endDate: moment()
                    },
                    function(start, end) {
                        $('#reportrange span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
                    }
            );

            //iCheck for checkbox and radio inputs
            $('input[type="checkbox"].minimal, input[type="radio"].minimal').iCheck({
                checkboxClass: 'icheckbox_minimal',
                radioClass: 'iradio_minimal'
            });
            //Red color scheme for iCheck
            $('input[type="checkbox"].minimal-red, input[type="radio"].minimal-red').iCheck({
                checkboxClass: 'icheckbox_minimal-red',
                radioClass: 'iradio_minimal-red'
            });
            //Flat red color scheme for iCheck
            $('input[type="checkbox"].flat-red, input[type="radio"].flat-red').iCheck({
                checkboxClass: 'icheckbox_flat-red',
                radioClass: 'iradio_flat-red'
            });

            //Colorpicker
            $(".my-colorpicker1").colorpicker();
            //color picker with addon
            $(".my-colorpicker2").colorpicker();

            //Timepicker
            $(".timepicker").timepicker({
                showInputs: false
            });
        });
    </script>

</body>
</html>